<template>
  <main class="mission_planing_container">
    <h2>任务规划模型管理</h2>
    <header class="flex flex-between">
      <div class="aside">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="small"
        >
          <el-form-item label="模型名称：">
            <el-input
              v-model="formInline.mxmc"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入模型名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="算法名称：">
            <el-input
              v-model="formInline.sfmc"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入算法名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="模型类型：">
            <el-input
              v-model="formInline.mxlx"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入模型类型"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="基本算法：">
            <el-input
              v-model="formInline.jbsf"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入模型类型"
            ></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="cleanSubmit">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="aside">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="small"
        >
          <!--          <el-form-item label="XXX检索：">-->
          <!--            <el-input-->
          <!--              v-model="formInline.sample"-->
          <!--              placeholder="请输入需要检索的XXX名称"-->
          <!--            ></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" @click="exportRwghmxZip">导出</el-button>
            <el-button type="primary" @click="deleteRwghmxData"
              >批量删除</el-button
            >
            <el-button type="primary" @click="addModelAndAssess"
              >添加模型</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </header>
    <!--    表格内容-->
    <main class="table_container">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        stripe
        class="mainTable"
        height="75vh"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" type="index" width="55">
        </el-table-column>
        <el-table-column show-overflow-tooltip label="模型名称" prop="mxmc">
        </el-table-column>
        <el-table-column show-overflow-tooltip label="算法名称" prop="sfmc">
        </el-table-column>
        <!-- <el-table-column show-overflow-tooltip label="基本算法" prop="jbsf">
        </el-table-column> -->
        <!-- <el-table-column show-overflow-tooltip label="元任务数量" prop="yrwsl">
        </el-table-column> -->
        <el-table-column show-overflow-tooltip label="任务完成率" prop="rwfgl">
        </el-table-column>
        <el-table-column show-overflow-tooltip label="模型类型" prop="mxlx">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="模型构建方式"
          prop="mxgjfs"
        />
        <el-table-column
          show-overflow-tooltip
          label="侧摆角均值"
          prop="cbjjz"
        />
        <el-table-column
          show-overflow-tooltip
          label="观测时效性均值"
          prop="gcsxxjz"
        />
        <el-table-column
          show-overflow-tooltip
          label="太阳高度角均值"
          prop="tygdjjz"
        />
        <el-table-column show-overflow-tooltip label="版本信息" prop="bbxx" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span class="operation" @click="sampleEdit(scope.row)"
              >编辑&nbsp; |&nbsp;
            </span>
            <span class="operation" @click="startTrain(scope.row)"
              >训练及评估</span
            >
          </template>
        </el-table-column>
      </el-table>
    </main>
    <footer class="fl_row_start">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageCurrent"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </footer>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @close="cancelRwghDialog"
    >
      <el-form
        :label-position="labelPosition"
        ref="rwghFrom"
        label-width="140px"
        :model="formLabelAlign"
        :rules="rules"
        size="small"
        style="margin-top: 35px;align-items: initial"
      >
        <div class="inputContainer">
          <el-form-item label="模型名称：" prop="mxmc">
            <el-input
              v-model="formLabelAlign.mxmc"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入模型名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="算法名称：" prop="sfmc">
            <el-input
              v-model="formLabelAlign.sfmc"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入算法名称"
            ></el-input>
          </el-form-item>
        </div>

        <div class="inputContainer">
          <el-form-item label="版本信息：" prop="bbxx">
            <el-input
              v-model="formLabelAlign.bbxx"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入版本信息"
            ></el-input>
          </el-form-item>
          <el-form-item label="模型类型：" prop="mxlx">
            <el-input
              v-model="formLabelAlign.mxlx"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入模型类型"
            ></el-input>
          </el-form-item>
        </div>
        <div class="inputContainer">
          <el-form-item label="模型构建方式：" prop="mxgjfs">
            <el-select
              v-model="formLabelAlign.mxgjfs"
              placeholder="请选择模型构建方式"
              style="width: 100%;"
            >
              <el-option
                v-for="(item, index) in modelBuildMethodOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div class="inputContainer_uplod" style="width: 49%;">
            <el-form-item label="上传文件：" style="width: 88%;">
              <el-input
                v-model="formLabelAlign.fileInfo.fileName"
                readonly
                maxlength="24"
                placeholder="请输入上传文件"
              ></el-input>
            </el-form-item>
            <form id="fileForm">
              <input
                type="file"
                id="fileUpload"
                name="file"
                accept=".zip"
                style="display: none;"
              />
              <el-button type="primary" size="mini" @click="selectWjButton"
                >上传</el-button
              >
            </form>
          </div>
        </div>

        <div class="inputContainer">
          <!-- <el-form-item label="基本算法：" prop="jbsf" style="width: 50%;">
            <el-input
              v-model="formLabelAlign.jbsf"
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入基本算法"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="侧摆角均值" prop="cbjjz">
            <el-input
              v-model="formLabelAlign.cbjjz"
              v-only-number
              maxlength="10"
              placeholder="侧摆角均值"
            ></el-input>
          </el-form-item>
          <el-form-item label="观测时效性均值" prop="gcsxxjz">
            <el-input
              readonly
              v-model="formLabelAlign.gcsxxjz"
              v-only-number
              maxlength="10"
              placeholder="观测时效性均值"
            ></el-input>
          </el-form-item>
        </div>
        <div class="inputContainer">
          <el-form-item label="太阳高度角均值" prop="tygdjjz">
            <el-input
              readonly
              v-model="formLabelAlign.tygdjjz"
              v-only-number
              maxlength="10"
              placeholder="太阳高度角均值"
            ></el-input>
          </el-form-item>
          <el-form-item label="任务完成率：" prop="rwfgl">
            <el-input
              v-model="formLabelAlign.rwfgl"
              v-only-number
              maxlength="10"
              placeholder="请输入任务完成率"
            ></el-input>
          </el-form-item>
        </div>

        <!-- <el-form-item label="元任务数量：" prop="yrwsl">
            <el-input
              v-model="formLabelAlign.yrwsl"
              v-only-number
              v-max-length-tip="30"
              v-no-space
              placeholder="请输入元任务数量"
            ></el-input>
          </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :disabled="mxCommit"
          @click="saveAndUpdateRwghData"
          >确 定</el-button
        >
        <el-button @click="cancelRwghDialog">取 消</el-button>
      </span>
    </el-dialog>
  </main>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss" scoped></style>
